<template>
  <div class="detail">
    <dl>
      <dt>
        <img :src="item.url" alt="" />
      </dt>
      <dd>
        <h3>{{ item.title }}</h3>
        <p>{{ item.auther }}</p>
        <p>
          <b>完结 {{ item.words }} 万字</b>
        </p>
      </dd>
    </dl>
    <h3>内容简介</h3>
    <p>{{ item.desc }}</p>

    <h2>
      <b>最新</b>
      <span>第{{ item.source }}章 完结</span>
    </h2>
    <h2>
      <b>目录</b>
      <span>共{{ item.source }}章</span>
    </h2>

    <!-- 评论列表 -->
    <ul>
      <li v-for="v in item.mess" :key="v.id">
        <p>
          <img :src="v.avatar" alt="" />
          <b>{{ v.nickname }}</b>
        </p>
        <p>{{ v.context }}</p>
        <p>{{ v.datetime }}</p>
      </li>
    </ul>
    <!-- 评论 -->
    <van-field
      v-model="message"
      rows="4"
      autosize
      label="留言"
      type="textarea"
      maxlength="50"
      placeholder="请输入留言"
      show-word-limit
    />
    <van-button type="primary" @click="add">评论</van-button>

    <van-tabbar placeholder>
      <van-tabbar-item> 
        <van-button type="primary" @click="handleClick">加入书架</van-button>
      </van-tabbar-item>
      <van-tabbar-item>
         <van-button type="info">开始阅读</van-button>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>


<script>
import axios from "axios";
export default {
  name: "Detail",
  created() {
    // 获取 动态路由id
    const { id } = this.$route.params;
    // 请求详情的数据
    axios.post("/detail", { id }).then(resp => {
      console.log(resp.data);
      // 绑定数据
      this.item = resp.data.data;
    });
  },
  data() {
    return {
      item: {},
      // 添加的评论内容
      message: ""
    };
  },
  methods: {
    add() {
      // 添加评论功能
      this.item.mess.push({
        avatar: require("@/assets/logo.png"),
        nickname: localStorage.getItem('token') ||  '游客',
        context: this.message,
        datetime: new Date().toLocaleString()
      });
    },
    // 加入书架功能
    handleClick() {
      this.$store.commit('Add_Collect', this.item)
    }
  }
};
</script>

<style scoped lang="scss">
.detail {
  padding: 10px;
  dl {
    display: flex;
    dt {
      img {
        width: 150px;
      }
    }
    dd {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
  h2 {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #ccc;
  }

  ul li {
    border-bottom: 1px solid #ccc;
    padding: 6px 0;
    p {
      img {
        width: 20px;
        border-radius: 50%;
      }
    }
  }
}
</style>